<template>
  <div class="bannerbox">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="img/Homes/b05.jpg" alt="" /></van-swipe-item>
  <van-swipe-item><img src="img/Homes/b04.jpg" alt="" /></van-swipe-item>
  <van-swipe-item><img src="img/Homes/b03.jpg" alt="" /></van-swipe-item>
  <van-swipe-item><img src="img/Homes/b02.jpg" alt="" /></van-swipe-item>
  <van-swipe-item><img src="img/Homes/b01.gif" alt="" /></van-swipe-item>
</van-swipe>
    <!-- <ul class="ul">
      <li><img src="../../../public/img/Homes/b05.jpg" alt="" /></li>
      <li><img src="../../../public/img/Homes/b04.jpg" alt="" /></li>
      <li><img src="../../../public/img/Homes/b03.jpg" alt="" /></li>
    </ul> -->
    <div class="t-r">
      <span class="iconfont icon-saoyisao"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Head",
};
</script>

<style scoped>
.bannerbox {
  width: 100%;
  height: 2rem;

}
.my-swipe{
   width: 100%;
   height: 100%;
}
 .my-swipe van-swipe-item {
   width: 100%;
   height: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

.bannerbox img {
width:  100%;
height: 100%;
}
/* .ul {
  width: 100%;
  height: 2rem;
  margin-top: 0.2rem;
}
.ul li {
  position: absolute;
  width: 100%;
  height: 2rem;
}

.t-r {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 0.01rem solid black;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}
.t-r span {
  font-size: 0.2rem;
  color: #fff;
  line-height: 0.4rem;
} */

  /* background: gray;
} */
.t-r span {
  font-size: 0.25rem;
  color: #fff;
  line-height: 0.4rem;
}
/* .ul {
  width: 100%;
  height: 2rem;
  margin-top: 0.2rem;
}
.ul li {
  position: absolute;
  width: 100%;
  height: 2rem;
}


 */

</style>